<!DOCTYPE html>
<html>
<head>
	<title>创建投票</title>
    
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	
    <!-- bootstrap -->
    <link href="/css/bootstrap/bootstrap.css" rel="stylesheet" />
    <link href="/css/bootstrap/bootstrap-responsive.css" rel="stylesheet" />
    <link href="/css/bootstrap/bootstrap-overrides.css" type="text/css" rel="stylesheet" />

    <!-- libraries -->
    <link href="/css/lib/bootstrap-wysihtml5.css" type="text/css" rel="stylesheet" />
    <link href="/css/lib/uniform.default.css" type="text/css" rel="stylesheet" />
    <link href="/css/lib/select2.css" type="text/css" rel="stylesheet" />
    <link href="/css/lib/bootstrap.datepicker.css" type="text/css" rel="stylesheet" />
    <link href="/css/lib/font-awesome.css" type="text/css" rel="stylesheet" />

    <!-- global styles -->
    <link rel="stylesheet" type="text/css" href="/css/layout.css" />
    <link rel="stylesheet" type="text/css" href="/css/elements.css" />
    <link rel="stylesheet" type="text/css" href="/css/icons.css" />
    
    <!-- this page specific styles -->
    <link rel="stylesheet" href="/css/compiled/form-showcase.css" type="text/css" media="screen" />

    <!-- open sans font -->
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css' />

    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body>

	<!-- navbar -->
	<div class="navbar navbar-inverse">
		<div class="navbar-inner">
			<button type="button" class="btn btn-navbar visible-phone"
				id="menu-toggler">
				<span class="icon-bar"></span> <span class="icon-bar"></span> <span
					class="icon-bar"></span>
			</button>

			<a class="brand" href="index.html"><img src="/img/logo.png" /></a>

			<ul class="nav pull-right">
				<li class="hidden-phone"><input class="search" type="text" />
				</li>
				<li class="notification-dropdown hidden-phone"><a href="#"
					class="trigger"> <i class="icon-warning-sign"></i> <span
						class="count"></span>
				</a>
					<div class="pop-dialog">
						<div class="pointer right">
							<div class="arrow"></div>
							<div class="arrow_border"></div>
						</div>
						<div class="body">
							<a href="#" class="close-icon"><i class="icon-remove-sign"></i></a>
							<div class="notifications">
								<h3>1条新消息</h3>
								<a href="#" class="item"> <i class="icon-signin"></i> 
									欢迎使用投票系统 <span class="time"><i
										class="icon-time"></i></span>
								</a>
								<div class="footer">
									<a href="#" class="logout">查看所有消息</a>
								</div>
							</div>
						</div>
					</div></li>
				<li class="notification-dropdown hidden-phone"><a href="#"
					class="trigger"> <i class="icon-envelope-alt"></i>
				</a>
					<div class="pop-dialog">
						<div class="pointer right">
							<div class="arrow"></div>
							<div class="arrow_border"></div>
						</div>
						<div class="body">
							<a href="#" class="close-icon"><i class="icon-remove-sign"></i></a>
							<div class="messages">
								<div class="footer">
									<a href="#" class="logout">查看所有信息</a>
								</div>
							</div>
						</div>
					</div></li>
				<li class="dropdown"><a href="#"
					class="dropdown-toggle hidden-phone" data-toggle="dropdown">
						账户信息 <b class="caret"></b>
				</a>
					<ul class="dropdown-menu">
						<li><a href="#">账户详情</a></li>
						<li><a href="#">账户设置</a></li>
						<li><a href="#">账户修改</a></li>
					</ul></li>
				<li class="settings hidden-phone"><a href="#"
					role="button"> <i class="icon-cog"></i>
				</a></li>
				<li class="settings hidden-phone"><a href="/admin/logout"
					role="button"> <i class="icon-share-alt"></i>
				</a></li>
			</ul>
		</div>
	</div>
    <!-- end navbar -->

    <!-- sidebar -->
    <div id="sidebar-nav">
        <ul id="dashboard-menu">
            <li>
                <a href="/vote/statics">
                    <i class="icon-home"></i>
                    <span>统计首页</span>
                </a>
            </li>            
            <li class="active">
                <div class="pointer">
                    <div class="arrow"></div>
                    <div class="arrow_border"></div>
                </div>
                <a href="/vote/create">
                    <i class="icon-signal"></i>
                    <span>创建投票</span>
                </a>
            </li>
			<li><a class="dropdown-toggle" href="#"> <i
					class="icon-group"></i> <span>用户信息</span> <i
					class="icon-chevron-down"></i>
			</a>
				<ul class="submenu">
					<li><a href="#">用户创建</a></li>
					<li><a href="#">用户信息编辑</a></li>
				</ul></li>
        </ul>
    </div>
    <!-- end sidebar -->


	<!-- main container -->
    <div class="content">
        
        <div class="container-fluid">
            <div id="pad-wrapper" class="form-page">
                <div class="row-fluid form-wrapper">
                    <!-- left column -->
                    <div class="span8 column">
                        <form>
                            <div class="field-box">
                                <label>标题:</label>
                                <input class="span8" type="text" id="title"/>
                            </div>
                            <div class="field-box">
                                <label>投票主题:</label>
                                <textarea class="span8" rows="4" value="不超过80个字" id="theme"></textarea>
                            </div>
                            <div id="option">
                            	<div id="subOption1" class="field-box">
                                	<label>选项1:</label>
                                	<input class="span8" type="text" />
                            	</div>   
                            	<div id="subOption2" class="field-box">
                                	<label>选项2:</label>
                                	<input class="span8" type="text" />
                            	</div>                      	
                            </div>
							<div class="field-box">
                                	<label>选项操作:</label>
                                    <input class="btn-glow primary" value="增加选项" onclick="addOption()"/>
                                    <input class="btn-glow primary" value="减少选项" onclick="delOption()"/>
                            </div>      
                            <div class="field-box">
                                <label>选择模式:</label>
                                <div class="span8">
                                    <label class="radio">
                                        <input type="radio" name="optionsRadios" id="vmodeSingle" value="0" checked="" />
                                        单选
                                    </label>
                                    <label class="radio">
                                        <input type="radio" name="optionsRadios" id="vmodeMulti" value="1" />
                                        多选
                                    </label>
                                </div> 
                            </div>
							<div class="field-box">
                            	<label>用户填写数字</label>
                                <input type="checkbox" id="isInput"><span>是</span>
                            </div> 
							<div class="field-box">
                                <label></label>
								<a class="btn-flat primary" onclick="saveVote()">提交</a>
                            </div>    
                        </form>
                    </div>

                    <!-- right column -->
                    <div class="span4 column pull-right">
                        <form>
                            <div class="field-box">
                                <label>投票截止日期:</label>
                                <input id="overDate" type="text" value="09/12/2015" class="input-large datepicker" />
                            </div>
                        </form>
						<form>
						    <div id="user">
                            	<div id="detail1" class="field-box">
                                	<label>投票所需信息:</label>
                                	<input class="span8" type="text" value=''/>
                            	</div>                       	
                            </div>
                            <div class="field-box">
                                <label></label>
								<a class="btn-flat primary" onclick="addUserOption()">增加信息</a>
								<a class="btn-flat primary" onclick="delUserOption()">减少信息</a>
                            </div>   
						</form>
						<form>
						    <div id="user">
                            	<div class="field-box">
                                	<label>发送OA:</label>
                                	<input id="OA" class="span8" type="text" value=''/>
                            	</div>                       	
                            </div>  
						</form>						
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- end main container -->

	<!-- scripts for this page -->
    <script src="/js/wysihtml5-0.3.0.js"></script>
    <script src="/js/pokemon.js"></script>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/bootstrap-wysihtml5-0.0.2.js"></script>
    <script src="/js/bootstrap.datepicker.js"></script>
    <script src="/js/jquery.uniform.min.js"></script>
    <script src="/js/select2.min.js"></script>
    <script src="/js/theme.js"></script>

    <!-- call this page plugins -->
    <script type="text/javascript">
	
		var optionNum = 2;
		
		var userOptionNum = 1;
		
		var $cOption;
		
		var $cMsg;
	
	    function addOption(){
			var curOptNum = optionNum+1;
			var $clone = $cOption.clone(true);
			$clone.children('label').html('选项'+curOptNum+':');
			$clone.attr('id','subOption'+curOptNum);
			optionNum = curOptNum;
			$('#option').append($clone);
		}
		function delOption(){
			if(optionNum<=1){
				alert('至少保留1个选项');
				return;
			}
			$('#option').children('#subOption'+optionNum).remove();
			optionNum = optionNum-1;
		}
		
		function addUserOption(){
			var curUserOptNum = userOptionNum+1;
			var $clone = $cMsg.clone(true);
			if(curUserOptNum>1){
				$clone.children('label').html('');
			}			
			$clone.attr('id','detail'+curUserOptNum);
			userOptionNum = curUserOptNum;
			$('#user').append($clone);
		}
		
		function delUserOption(){
			if(userOptionNum<=0){
				alert('无用户信息可减少');
				return;
			}
			$('#user').children('#detail'+userOptionNum).remove();
			userOptionNum = userOptionNum-1;
		}
		
		function saveVote(){
			
			var voteDto = {};
			voteDto.title = $('#title').val();
			voteDto.theme = $('#theme').val();
			voteDto.vmode = $('#vmode').val();
			voteDto.memo = $('#OA').val();
			if($('#vmodeSingle').prop('checked')){
				voteDto.vmode = 0;
			}
			else if($('#vmodeMulti').prop('checked')){
				voteDto.vmode = 1;
			}
			else{
				alert('请选择选项模式 单选或多选!');
				return;
			}
			voteDto.overDateStr = $('#overDate').val();
			voteDto.voteOptionDtos = [];
			voteDto.voteMsgDtos = [];
			var isinput = $('#isInput').prop('checked')?1:0;
			for(var i=1;i<=optionNum;i++){
				var $option = $('#subOption'+i);
				if($option){
					voteDto.voteOptionDtos[i-1] = {} 
					voteDto.voteOptionDtos[i-1].optionstr= $option.children('input').val();
					voteDto.voteOptionDtos[i-1].isinput = isinput;
				}			
			}
			
			//用户信息
			for(var i=1;i<=userOptionNum;i++){
				var $option = $('#detail'+i);
				if($option){
					voteDto.voteMsgDtos[i-1] = {}
					voteDto.voteMsgDtos[i-1].msg= $option.children('input').val();
				}			
			}
			
			var jdata = JSON.stringify(voteDto);
			postContent("/vote/save",jdata,true,function(data){
				if(data!=null){
					alert('保存成功!');
				}
			});
		}
		
		function cancelVote(){
			
		}
		
        $(function () {

            // add uniform plugin styles to html elements
            $("input:checkbox, input:radio").uniform();

            // select2 plugin for select elements
            $(".select2").select2({
                placeholder: "Select a State"
            });

            // datepicker plugin
            $('.datepicker').datepicker().on('changeDate', function (ev) {
                $(this).datepicker('hide');
            });

            // wysihtml5 plugin on textarea
            $(".wysihtml5").wysihtml5({
                "font-styles": false
            });
            
            $cOption = $('#subOption1').clone(true);
            $cMsg = $('#detail1').clone(true);
            
        });
    </script>
<div style="display:none"><script src='http://v7.cnzz.com/stat.php?id=155540&web_id=155540' language='JavaScript' charset='gb2312'></script></div>
</body>
